<template>
  <div class="user-updateDialog">
    <cfDialog :dialogObj='dialogObj'>
      <div slot='content' v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="归属部门" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="邮 箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%;">
                <el-option v-for="dict in sysUserSex" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="状 态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sysNormalDisable" :key="dict.dictValue" :label="dict.dictValue" >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="岗 位">
              <el-select v-model="form.postIds" multiple placeholder="请选择岗位" style="width: 100%;">
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs='24' :sm='12' :md='12' :lg='12' :xl='12'>
            <el-form-item label="角 色">
              <el-select v-model="form.roleIds" multiple placeholder="请选择角色" style="width: 100%;">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs='24' :sm='24' :md='24' :lg='12' :xl='12'>
            <el-form-item label="备 注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      </div>
      <template slot='footer'>
        <el-button type='primary' size='small' v-if="!loading" @click='handleConfirm'>确定</el-button>
      </template>
    </cfDialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
  export default {
    components: { Treeselect },
    props: {
      dialogObj: {
        type: Object,
        defualt: () => ({
          visible: false,
          title: '',
          width: '',
          type: 'add',
          id: ''
        })
      }
    },
    data() {
      return {
        form: {},
        // 表单校验
        rules: {
          userName: [
            { required: true, message: "用户名称不能为空", trigger: "blur" },
            { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
          ],
          nickName: [
            { required: true, message: "用户昵称不能为空", trigger: "blur" }
          ],
          password: [
            { required: true, message: "用户密码不能为空", trigger: "blur" },
            { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
          ],
          email: [
            {
              type: "email",
              message: "请输入正确的邮箱地址",
              trigger: ["blur", "change"]
            }
          ],
          phonenumber: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ]
        },
        deptOptions: [], /**部门下拉列表 */
        postOptions: [], /**岗位下拉列表 */
        roleOptions: [], /**角色下拉列表 */
        loading: false
      }
    },
    created() {
      this.getUserFn();
      this.getSysUserSex();
      this.getSysNormalDisable();
      this.getDeptTree();
      this.dialogObj.id && this.getUserDetail();
    },
    methods: {
      handleConfirm() {
        this.submitForm('form', async () => {
          this.loading = true;
          let res = null;
          if (this.form.userId != undefined) {
            res = await updateUser(this.form)
          } else {
            res = await addUser(this.form)
          }
          if(res.code == 200) {
            this.$modal.msgSuccess("操作成功");
            this.$emit('refresh');
            this.dialogObj.visible = false;
          }
          setTimeout(() => {
            this.loading = false;
          }, 500);
        })
      },
      async getUserFn() {
        const res = await getUser();
        if(res.code == 200) {
          this.postOptions = res.posts;
          this.roleOptions = res.roles;
        }
      },
      /** 查询部门下拉树结构 */
      async getDeptTree() {
        const res = await deptTreeSelect();
        if(res.code == 200) {
          this.deptOptions = res.data;
        }
      },
      /**获取用户信息 */
      async getUserDetail() {
        this.loading = true;
        const res = await getUser(this.dialogObj.id);
        if(res.code == 200) {
          this.form = res.data;
          this.$set(this.form, "postIds", res.postIds);
          this.$set(this.form, "roleIds", res.roleIds);
          this.form.password = "";
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }
    },
  }
</script>

<style lang="scss" scoped>
.user-updateDialog {

}
</style>